<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

    <title>抢单</title>

    <link href="css/admin.css" rel="stylesheet" type="text/css">
    <link href="css/amazeui.css" rel="stylesheet" type="text/css">
    <link href="css/personal.css" rel="stylesheet" type="text/css">
    <link href="css/infstyle.css" rel="stylesheet" type="text/css">
    <link href="css/lostyle.css" rel="stylesheet" type="text/css">
    <link href="css/orstyle.css" rel="stylesheet" type="text/css">

    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/amazeui.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script src="js/common.js"></script>

</head>

<body>
<!-------------------------------------- 头部开始 -------------------------------------->
<div id="app">
    <top></top>
    <bar></bar>
    <b class="line"></b>
    <!-------------------------------------- 头部结束 -------------------------------------->

    <!-------------------------------------- 内容开始 -------------------------------------->

    <div class="center">
        <div class="col-main">
            <div class="main-wrap">
                <!--------------------------------------标题开始 -------------------------------------->

                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">
                        抢单</strong> / <small>保质保量，优质完成</small>
                    </div>
                </div>
                <hr>

                <div class="order-infomain" style="text-align: center">

                    <div class="order-top">
                        <div class="th th-item">
                            <td class="td-inner">订单地址：</td>
                        </div>
                        <div class="th th-price">
                            <td class="td-inner">预约时间：</td>
                        </div>

                        <div class="th th-operation">
                            <td class="td-inner"> 故障类型</td>
                        </div>


                        <div class="th th-change">
                            <td class="td-inner">操作</td>
                        </div>
                    </div>

                    <div class="order-main" v-for="order,index in orders" >
                        <div class="order-status3">
                            <div class="order-content">
                                <div class="order-left">
                                    <ul class="item-list">
                                        <li class="td td-item">
                                            <div class="item-info">
                                                <div class="item-basic-info"  style="text-align: center">
                                                    {{order.addressInfo}}
                                                </div>
                                            </div>
                                        </li>
                                        <li class="td td-price">
                                            <div class="item-price" style="text-align: center">
                                                {{order.appointmentStartTime}}-{{order.appointmentEndTime}}
                                            </div>
                                        </li>
                                        <li class="th th-operation">
                                            <div class="item-operation" style="text-align: center">
                                                待定
                                            </div>
                                        </li>
                                    </ul>

                                </div>
                                <div class="order-right" style="width: 20%">
                                    <div class="am-btn am-btn-danger anniu" @click="getThisOrder(order)">点击抢单</div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>


            </div>


            <!-------------------------------------- 内容结束 -------------------------------------->
            <!-------------------------------------- 尾部开始 -------------------------------------->
            <end></end>
        </div>
        <!-------------------------------------- 尾部结束 -------------------------------------->

        <!-------------------------------------- 侧边导航栏开始 -------------------------------------->
        <ban></ban>
    </div>
</div>

<!-------------------------------------- 侧边导航栏结束 -------------------------------------->
</body>
</html>


<script>

    /*
    王梓旭 2021-6-20
    */
    var app = new Vue({
        el: "#app",
        data: {
            workerInfo: {}, //登录的维修人员
            orderInfo: {}, //服务器发送过来的一个订单的对象
            orders:[], //页面上所有的可以抢的订单的集合
            ts: [],
            sendMessage: {},
        },
        created: function () {
            this.initData();
            this.webSocket(); // 连接WebSocket
        },
        destroyed: function () {
            this.websocketclose();
        },

        methods: {
            initData: function () {
                this.orderInfo = [];
                this.ts = [];
                //获取登录的维修人员的信息
                //this.workerInfo= localStorage.getItem("worker");
                this.workerInfo = {'id':2,'workerName':'testWorker',};
            },
            getThis() {
                axios.post("http://localhost:8080/user/sendMessage");
            },
            webSocket: function () {
                // 建立socket连接
                //判断当前浏览器是否支持webSocket
                if ('WebSocket' in window) {
                    //这里websocket后面的参数格式为： 【对象类型】【对象名】【对象id】 姓名有可能出现乱码，以后如果有时间可以进行替换
                    this.websock = new WebSocket("ws://192.168.43.226/websocket/worker"+this.workerInfo.workerName+this.workerInfo.id);//与后端服务建立连接
                    console.log("连接服务器。。。。。。。。。。。。")
                } else {
                    alert('你的浏览器暂不支持websocket :(');
                }
                console.log(this.websock);
                this.websock.onopen = this.websocketonopen;
                this.websock.onerror = this.websocketonerror;
                this.websock.onmessage = this.websocketonmessage;
                this.websock.onclose = this.websocketclose;
            },
            websocketonopen: function () {
                console.log("WebSocket连接成功");
                var data = '这是' + 'user' + '，加入了连接';
                this.websocketsend(data)
            },
            websocketonerror: function (e) {
                alert("WebSocket连接发生错误");
                // console.log("WebSocket连接发生错误");
            },
            // 数据接收
            websocketonmessage: function (e) {
                // 判断消息是添加订单还是删除订单
                if (e.startsWith("delete",1)){ //删除订单的消息
                    //获取订单的ID
                    var id = e.substr(5,e.length-6);
                    //从订单的集合中删除掉这个订单对象
                    for(var i=0;i<this.orders.size;i++){
                        if (order.id === id){
                             this.orders.splice(i,1);
                        }
                    }
                }
                //添加订单
               this.orders.push(e.data.order);
            },
            // 数据发送
            websocketsend: function (data) {
                //暂时不需要通过websocket来进行消息的发布
                //this.websock.send('');
            },
            websocketclose: function (e) {
                this.websock.close();
                this.tips("WebSocket连接关闭");
                console.log("connection closed (" + e + ")");// e.code
            },
            //弹窗提醒websocket的服务器连接情况
            tips(msg) {
                alert(msg);
            },
            //维修人员抢单
            getThisOrder(order){
                //将维修人员信息添加到订单中
                order.workersId = this.workerInfo.id;
                axios.post("http://localhost:8080/worker/getTheOrder",order)
                    .then(res=>{
                        this.complainsTypes = res.data.data;
                    });
            }
        }
    });
</script>
